<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>

</head>
<body>
    <div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td> <input type="checkbox" /></td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td> <input type="checkbox" /></td>
                <td>小米</td>
                <td>2500</td>
            </tr>
            <tr>
                <td> <input type="checkbox" /></td>
                <td>三星</td>
                <td>4300</td>
            </tr>
            <tr>
                <td> <input type="checkbox" /></td>
                <td>华为</td>
                <td>6500</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    //1.全选和取消全选做法：让下面所有复选框的checked 属性（选中状态）跟随  全选按钮即可
    //获取元素
    var j_cbAll = document.getElementById('j_cbAll');//全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')//下面所有的复选框
    //注册事件
   
        //this.checked 可以得到当前复选框的选中
        j_cbAll.onclick = function(){
            //this.checked 可以得到当前复选框的选中状态如果是true就是选中，如果是false就是未选中
            console.log(this.checked);
            for(var i = 0;i<j_tbs.length;i++){
                j_tbs[i].checked = this.checked;
            }
        }
        //2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击都循环查看下面
        //所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中
        for(var i =0;i<j_tbs.length;i++){
            j_tbs[i].onclick = function(){
                //flag控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都要循环检查4个小按钮是否全被选中
                for(var i=0;i<j_tbs.length;i++){//因为是不同的作用域  所以可以使用相同的i
                    if(!j_tbs[i].checked){
                        flag = false;
                        break;//退出for循环  这样可以提高执行效率
                    }
                }
                j_cbAll.checked = flag;
            }
            
        }
    


</script>
</body>
</html>